<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class="right-container">
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="search-contain">
                    <el-form :inline="true">
                        <el-form-item label="学科">
                            <el-input v-model="name" placeholder="学科" class="static-input">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="desc" placeholder="关键字" class="static-input">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="content-contain">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background:'#EFF1F6',color:'#1C1C1C'}"
                        stripe
                        @cell-mouse-enter="enterCell"
                        @cell-mouse-leave="leaveCell">
                        <el-table-column label="学科" prop="name">
                        </el-table-column>
                        <el-table-column label="备注" prop="desc">
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope" title="编辑">
                                <span class="operate" @click="editSubject(scope.row.id,scope.row.name,scope.row.desc)">
                                    <img src="../../src/assets/img/welcome/edit.png" alt="">
                                </span>
                                <span class="operate" title="删除" @click="deleteRow(scope.row.id)">
                                    <img src="../../src/assets/img/welcome/delete.png" alt="">
                                </span>
                                <span class="operate upDown" title="上移"
                                    @click="sortSubject(scope.row.id,1,scope.row.desc)">
                                    <img src="../../src/assets/img/welcome/up.png" alt="">
                                </span>
                                <span class="operate upDown" title="下移"
                                    @click="sortSubject(scope.row.id,-1,scope.row.desc)">
                                    <img src="../../src/assets/img/welcome/down.png" alt="">
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="footer-contain">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[20, 50, 100, 200]" :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                    <div class='go-page'>确定</div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
import SideNav from '../../src/components/SideNav'
import Header from '../../src/components/Header'
import {
    getSubjectPage,
    deleteSubject,
    sortSubject
} from '@/api/subjectList'
export default {
    components: {
        SideNav,
        Header
    },
    data() {
        return {
            headerList: ['会员', '学科', '学科列表'],
            openeds: ['4', '4-2'],
            activeTab: 'Member',
            name: '',
            desc: '',
            loading: false,
            page: 1,
            pagesize: 10,
            total: 0,
            tableData: []
        }
    },
    mounted() {
        this.getSubjectPage()
    },
    methods: {
        getSubjectPage() {
            this.loading = true
            getSubjectPage({
                page: this.page,
                pagesize: this.pagesize,
                name: this.name,
                desc: this.desc
            }).then(res => {
                this.loading = false
                if (res.code == 1) {
                    this.tableData = res.data.list
                    this.total = res.data.recordcount
                }
            }).catch(e => {
                this.loading = false
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pagesize = val
            this.getSubjectPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.page = val
            this.getSubjectPage()
        },
        handleEdit(index, row) {
            console.log(index, row)
        },
        handleDelete(index, row) {
            console.log(index, row)
        },
        onSubmit() {
            this.getSubjectPage()
        },
        resetForm() {
            this.name = ''
            this.desc = ''
            this.page = 1
            this.pagesize = 10
            this.getSubjectPage()
        },
        enterCell(row, column, cell, event) {
            row.showIcon = true
        },
        leaveCell(row, column, cell, event) {
            row.showIcon = false
        },
        editSubject(id, name, desc) {
            this.$router.push({
                path: '/addSubject',
                query: {
                    id: id,
                    action: 'edit',
                    name: name,
                    desc: desc
                }
            })
        },
        deleteRow(id) {
            this.$confirm('删除，请确认？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteSubject(id)
            }).catch(() => {

            })
        },
        async deleteSubject(id) {
            deleteSubject({
                id: id
            }).then(res => {
                if (res.code == 1) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.getSubjectPage()
                }
            })
        },
        async sortSubject(id, sort, desc) {
            sortSubject({
                id: id,
                sort: sort,
                desc: desc
            }).then(res => {
                if (res.code == 1) {
                    this.$message({
                        message: '排序成功',
                        type: 'success'
                    })
                    this.getSubjectPage()
                }
            })
        }
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .search-contain {
        // margin-top: 20px;
        padding-left: 20px;
        padding-top: 24px;
    }

    .content-contain {
        // padding-left: 16px;
    }

    .right-container {
        background: #ffffff;
        height: 100%;
    }

    .operate {
        cursor: pointer;
        margin-right: 20px;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .upDown {
        display: none;
    }

    .el-table__body {
        tr {
            &:hover {
                .upDown {
                    display: inline-block;
                }
            }
        }
    }

    .grid-content {
        span {
            position: relative;
            margin-right: 5px;
            top: 3px;
        }
    }

</style>
<style lang="less">
    .el-table {
        border: 1px solid rgba(223, 230, 236, 1) !important;
        border-bottom: none !important;
    }

    .el-table__header-wrapper {
        height: 40px !important;
        background: rgba(239, 241, 246, 1) !important;
    }

    .el-table__header tr,
    .el-table__header th {
        padding: 0 !important;
        height: 40px !important;
    }

    .el-table__body-wrapper {
        .el-row {
            margin-bottom: 16px !important;

            &:first-child {
                margin-top: 10px !important;
            }
        }

        tbody {

            .table__row,
            td {
                padding: 8px 0px !important;

            }

        }
    }

    .static-input {
        width: 150px !important;
        height: 40px !important;
    }

    .el-form-item__content {
        margin-right: 20px
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
